/**
 * 底部导航栏组件
 * 
 * 功能描述：
 * - 移动端应用的主要导航组件
 * - 提供就医、消息、订单三个主要功能入口
 * - 支持活跃状态的视觉反馈和动画效果
 * - 适配移动端安全区域的底部导航
 * 
 * 使用场景：
 * - 移动端应用的主要导航
 * - 快速切换主要功能模块
 * - 提供一致的用户导航体验
 * 
 * 作者：系统
 * 创建时间：2024
 */

import { Home, Bell, ClipboardList } from 'lucide-react';

interface BottomNavigationProps {
  activeTab: 'medical' | 'messages' | 'orders';
  onTabChange: (tab: 'medical' | 'messages' | 'orders') => void;
}

export default function BottomNavigation({ activeTab, onTabChange }: BottomNavigationProps) {
  const tabs = [
    {
      id: 'medical' as const,
      label: '就医',
      icon: Home,
      description: '在线问诊、预约挂号',
    },
    {
      id: 'messages' as const,
      label: '消息',
      icon: Bell,
      description: '咨询记录、系统通知',
    },
    {
      id: 'orders' as const,
      label: '订单',
      icon: ClipboardList,
      description: '订单管理、支付记录',
    },
  ];

  return (
    <nav className="bg-white border-t border-gray-200 safe-area-bottom shadow-lg">
      <div className="flex">
        {tabs.map((tab) => {
          const IconComponent = tab.icon;
          const isActive = activeTab === tab.id;
          
          return (
            <button
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              className={`flex-1 flex flex-col items-center py-3 px-1 transition-all duration-300 ease-in-out ${
                isActive 
                  ? 'text-primary-500 transform scale-105' 
                  : 'text-gray-500 hover:text-gray-700'
              }`}
              title={tab.description}
            >
              <div className={`p-2 rounded-full transition-all duration-300 ${
                isActive 
                  ? 'bg-primary-50 shadow-md transform scale-110' 
                  : 'hover:bg-gray-50 hover:shadow-sm'
              }`}>
                <IconComponent 
                  size={20} 
                  className={`transition-all duration-300 ${
                    isActive ? 'transform scale-110' : ''
                  }`}
                />
              </div>
              <span className={`text-xs mt-1 font-medium transition-all duration-300 ${
                isActive ? 'text-primary-500 font-semibold' : 'text-gray-500'
              }`}>
                {tab.label}
              </span>
              {isActive && (
                <div className="w-1 h-1 bg-primary-500 rounded-full mt-1 animate-pulse"></div>
              )}
            </button>
          );
        })}
      </div>
    </nav>
  );
} 